<!Doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>函数节流与函数防抖</title>
        <style type='text/css'>
            html{
                height:500%;
            }
        </style>
    </head>
    <body>
        <button id='deBounce'>防抖按钮</button>
        <script type='text/javascript'>
        //throttle节流函数：
        //一个函数执行一次后，
        //只在大于一个设定的时间间隔后才执行第二次
            function throttle(fn,delay){
                var lastTime = 0
                return ()=>{
                    var nowTime= Date.now()
                    if(nowTime-lastTime > delay){

                        //修正this指向
                        fn.call(this)
                        lastTime = nowTime  
                        
                    }
                }
            }
            window.onscroll=throttle(function fn(){
                    console.log('节流函数已执行'+Date.now())},200)

        //debounce防抖函数，
        //频繁触发一个事件，
        //该事件只会在频繁触发后的一个设定时间内没有被触发时
        //才会生效且只有最后一次触发事件生效
                function debounce(fn,delay){
                    var   timer= null 
                    return ()=>{
                        clearTimeout(timer)
                        timer =  setTimeout(()=>{
                            fn.call(this)
                        },delay)
                    }
                }
                deBounce.onclick= debounce(()=>{
                    console.log('防抖函数已执行')},1000)
        </script>
    </body>
</html>